<template>
  <p-c v-if="pcElement" class="invite-pc" />
  <mobile v-if="mobileElement" class="invite-mobile" />
</template>

<script setup lang="ts">
  import { onMounted, ref } from 'vue'

  import mobile from './components/mobile.vue'
  import PC from './components/PC.vue'

  const pcElement = ref<boolean>(false)
  const mobileElement = ref<boolean>(false)

  onMounted(() => {
    const mediaQueryList = window.matchMedia('(max-width: 1024px)')

    const handleMediaChange = (e: MediaQueryListEvent) => {
      if (e.matches) {
        pcElement.value = false
        mobileElement.value = true
      } else {
        pcElement.value = true
        mobileElement.value = false
      }
    }

    handleMediaChange(mediaQueryList as any)

    mediaQueryList.addEventListener('change', handleMediaChange)
  })
</script>

<style lang="less" scoped>
  // 媒体查询
  // @media screen and (width <= 1024px) {
  //   .invite-pc {
  //     display: none;
  //   }

  //   .invite-mobile {
  //     display: block;
  //   }
  // }
  // @media screen and (width > 1024px) {
  //   .invite-pc {
  //     display: block;
  //   }

  //   .invite-mobile {
  //     display: none;
  //   }
  // }
</style>
